<template>
	<view class="my-point">
		<view class="top" :style="{backgroundImage: 'url('+$util.img('upload/uniapp/spread/my-bonus-top.png')+')'}">
			<view class="flex-col-between">
				<view class="stats stats-vertical">
					<view class="stats-title">可提现消费券</view>
					<view class="stats-value">{{balance}}</view>
				</view>
				<button class="butt-withdraw" type="default" @click="toWithdraw">去提现</button>
			</view>
			<view class="flex-col-between">
				<view class="stats stats-horizen flex-start">
					<view class="stats-title">累计分红</view>
					<view class="stats-value">{{totalBonus}}</view>
				</view>
				<view class="stats stats-horizen flex-start">
					<view class="stats-title">累计提现</view>
					<view class="stats-value">{{totalWithdraw}}</view>
				</view>
			</view>
		</view>
		<view class="point-rule">
			<view class="flex-start"  @click="showRules">
				<image class="point-rule-icon" :src="$util.img('upload/uniapp/spread/icon-detail.png')" mode="aspectFit"></image>分红规则
			</view>
		</view>
		<view class="tabs flex-col-between">
			<view class="tab-item" :class="{active:index === tabIndex}" v-for="(item,index) in tabs" :key="index"
				@click="turnTab(index)">{{item.title}}</view>
		</view>
		<!-- <view class="navis flex-start" v-if="tabIndex === 1">
			<view class="navi-item" @click="turnNav(index)" :class="{active:index === navIndex}"
				v-for="(item,index) in navs">{{item.title}}</view>
		</view> -->
		<mescroll-uni ref="mescroll" @getData="getData" :size="15" :top="scrollTop">
			<block slot="list">
				<view class="point-records">
					<view class="record" v-if="pointList.length > 0" v-for="(itmes,index) in pointList" :index="index">
						<view class="flex-col-between">
							<view class="record-name">{{itmes.type_name}}</view>
							<view class="record-value">{{itmes.account_data > 0 ? '+'+itmes.account_data : itmes.account_data}}</view>
						</view>
						<view class="flex-col-between">
							<view class="record-time">{{itmes.create_time}}</view>
							<view class="record-status" v-if="itmes.status_name">{{itmes.status_name}}</view>
						</view>
					</view>
					<ns-empty v-if="!pointList.length && showEmpty" text="暂无明细记录" :fixed="!1" :isIndex="!1"></ns-empty>
				</view>
			</block>
		</mescroll-uni>
		<view class="mask" v-if="rulesVisible">
			<view class="point-rule-modal">
				<text class="modal-close iconfont iconclose"  @click="showRules"></text>
				<view class="modal-title">分红规则</view>
				<view class="modal-content">
					<view class="rule-paragraph">1.实体商家使用微家本地通系统营销推广,销售额获得平台赠送的相应分红</view>
					<view class="rule-paragraph">2.平台赠送分红累计,次日补贴后,减去相应分红额度为剩余分红</view>
					<view class="rule-paragraph">3.100以上参与分红,不足100不参与分红</view>
					<view class="rule-paragraph">4.补贴分红消费券，满16元提现</view>
					<view class="rule-paragraph">5.平台盈利部分计入分红,分完即止</view>					 
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					title: '获取明细',
					value: 'points_bonus'
				}, {
					title: '提现明细',
					value: 'withdraw'
				}],
				tabIndex: 0,
				navs: [{
					title: '全部',
					value: '1'
				}, {
					title: '待审核',
					value: '2'
				}, {
					title: '已审核',
					value: '3'
				}, {
					title: '已拒绝',
					value: '4'
				}],
				navIndex: 0,
				rulesVisible:false,
				balance: 0.00,
				totalBonus: 0.00,
				totalWithdraw: 0.00,
				fromType: 'points_bonus',
				status: '',
				scrollTop: 540,
				pointList: [],
				showEmpty: false
			}
		},
		methods: {
			turnTab(index) {
				// if (index > 0) {
				// 	this.scrollTop = 596;
				// } else {
				// 	this.scrollTop = 540;
				// }
				this.tabIndex = index;
				this.fromType = this.tabs[index]['value'];
				this.pointList = [];
				this.mescroll.resetUpScroll();
			},
			turnNav(index) {
				this.navIndex = index;
				this.status = this.navs[index]['value'];
				this.pointList = [];
				this.mescroll.resetUpScroll();
			},
			showRules(){
				this.rulesVisible = !this.rulesVisible;
			},
			toWithdraw() {
				uni.navigateTo({
					url : '/otherpages/member/apply_withdrawal/apply_withdrawal'
				})
			},
			getData(mescroll) {
				if (mescroll.num == 1) {
					this.extensionList = [];
				}
				this.mescroll = mescroll;
				this.showEmpty = false;
				this.$api.sendRequest({
					url: '/spread/api/spread/memberBonus',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						fromType: this.fromType,
						status: this.status
					},
					success: res => {
						this.showEmpty = true;
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data && res.data.list) {
							newArr = res.data.list;
							newArr.forEach(v => {
								v.create_time = this.$util.timeStampTurnTime(v.create_time).substring(0, 19);
							});
							this.balance = res.data.balance;
							this.totalBonus = res.data.totalBonus;
							this.totalWithdraw = res.data.totalWithdraw;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.pointList = []; //如果是第一页需手动制空列表
						this.pointList = this.pointList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						this.showEmpty = true;
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.flex-col-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-start {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.my-point {
		overflow: hidden;
	}

	.top {
		margin: 30rpx;
		margin-bottom: 0;
		background-size: 100% 100%;
		// width: 690rpx;
		height: 218rpx;
		padding: 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: space-between;
		flex-direction: column;
		.butt-withdraw {
			display: flex;
			justify-content: center;
			align-items: center;
			white-space: nowrap;
			width: 128rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #FF4544;
			line-height: 40rpx;
		}
		.stats {
			.stats-title {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.75);
				line-height: 33rpx;
			}

			.stats-value {
				font-size: 32rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 37rpx;
			}
		}

		.stats-vertical {
			.stats-value {
				font-size: 48rpx;
				line-height: 56rpx;
			}
		}
	}

	.stats-vertical {
		.stats-value {
			margin-top: 8rpx;
		}
	}

	.stats-horizen {
		.stats-value {
			margin-left: 8rpx;
		}
	}

	.point-rule {
		padding: 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.point-rule-icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
			font-size: 32rpx;
			color: #909399;
		}

		font-size: 24rpx;
		color: #909399;
		line-height: 33rpx;
	}

	.tabs {
		border-bottom: 1rpx solid #E8E8E8;

		.tab-item {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 24rpx 0;
			width: 50%;
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;

			&.active {
				position: relative;
				color: #FF4544;

				&::after {
					position: absolute;
					bottom: 0;
					left: calc((100% - 112rpx)/2);
					content: '';
					width: 112rpx;
					height: 4rpx;
					background: #FF4544;
				}
			}
		}
	}

	.navis {
		padding: 24rpx 0;

		.navi-item {
			margin-left: 48rpx;
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;

			&.active {
				color: #FF4544;
			}
		}
	}

	.point-records {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.record {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #E8E8E8;

		&:last-child {
			border-bottom: none;
		}

		.record-name {
			font-size: 32rpx;
			color: #000000;
			line-height: 45rpx;
		}

		.record-value {
			font-size: 36rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #FF4544;
			line-height: 42rpx;
		}

		.record-time {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #909399;
			line-height: 34rpx;
		}
		.record-status {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #FF4544;
			line-height: 34rpx;
		}
	}
	
	.mask {
		position: fixed;
		z-index: 99999999;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		.point-rule-modal {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 30rpx;
			// width: 100vw;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;
			.modal-title {
				text-align: center;
				margin-bottom: 68rpx;
				font-size: 32rpx;
				color: #303133;
				line-height: 46rpx;
			}
			.modal-close {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 48rpx;
				height: 48rpx;
				font-size: 32rpx;
				color: #333;
			}
			.modal-content {
				.rule-paragraph{
					margin-bottom: 24rpx;
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}
			}
		}
	}
	
</style>
